<template>
    <el-row class="min-h-screen bg-rose-100">
        <el-col :lg="16" :md="12" class="flex items-center justify-center">
            <div>
                <div class="font-bold text-5xl text-dark-50 mb-4">欢迎登录</div>
                <div class="text-2xl">这里是人生目标开始的地方~</div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" class="bg-orange-100 flex items-center justify-center flex-col">
            <h2 class="font-bold text-3xl text-orange-300">欢迎回来</h2>
            <div class="flex items-center justify-center my-5 text-gray-500 space-x-2">
                <span class="line"></span>
                <span>账号密码登录</span>
                <span class="line"></span>
            </div>
            <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type=password show-password v-model="form.password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round class="w-[250px]" @click="onSubmit" :loading="loading">登
                        录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { login } from "~/api/manager.js";
import { useStore } from "vuex";
import { setToken } from '~/composables/auth';
import { toast } from '~/composables/util';
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore();

const form = reactive({
    name: '',
    password: '',
})

const formRef = ref(null);
const loading = ref(false);

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            loading.value = true;
            login(form.name, form.password)
                .then(res => {
                    const flag = res.success;
                    console.log(flag);
                    if (flag) {
                        toast("登录成功")
                        setToken(res.data.token)
                        console.log(res)
                        store.commit("SET_USER_INFO", res);
                        console.log(store.state.user)
                        // 跳转到后台首页
                        router.push("/")
                    } else {
                        toast(res.errorMessage, "error", false)
                    }
                    
                }).finally(() => {
                    loading.value = false;
                })
        }
    })
}

const rules = {
    name: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur'
        },
        {
            min: 3,
            max: 16,
            message: '用户名长度3到16位',
            trigger: 'blur'
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        },
        {
            min: 3,
            max: 16,
            message: '密码长度3到16位',
            trigger: 'blur'
        },
    ]

}
</script>
<style scoped>
.line {
    @apply h-[1px] w-16 bg-gray-300;
}
</style>